// 用户名
let ueser = document.querySelector(".ueser")
let ueserQ = document.querySelector(".ueser-q")

// 短信
let phone = document.querySelector(".phone")
let phoneQ = document.querySelector(".phone-q")

// 验证码
let code = document.querySelector(".code-i")
let codeQ = document.querySelector(".code-q")

// 密码
let password = document.querySelector(".password")
let passwordQ = document.querySelector(".password-q")

let inp = document.querySelectorAll("input")
let tpq=document.querySelector(".tpq")
let tpw=document.querySelector(".tpw")
let tpe=document.querySelector(".tpe")
let tpr=document.querySelector(".tpr")
let btn = document.querySelector("#reg")


// 鼠标点击输入框，边框变色，点击其他边框时，判断上一个边框是否符合条件
for (let p = 0; p < inp.length; p++) {
inp[p].addEventListener("click",function(){
    for(let z=0;z<inp.length;z++){
        inp[z].classList.remove("on")
    }
    inp[p].classList.add("on")
})
}

// 用户名
ueser.addEventListener("blur", function () {
    let ueserI = ueser.value
    if (ueserI.length >= 6 && ueserI.length <= 20) {
        ueserQ.textContent = ""
        tpq.classList.remove("in")
    } else {
        tpq.classList.add("in")
        ueserQ.textContent = "请输入6-20位的用户名"
        ueserQ.style.color = "red"
        ueserQ.style.opacity = "1";
    }
})

// 短信
phone.addEventListener("blur", function () {
    let phoneI = phone.value
    if (phoneI.length == 11) {
        phoneQ.textContent = ""
        tpw.classList.remove("in")
    } else {
        tpw.classList.add("in")
        phoneQ.textContent = "请输入11位手机号码"
        phoneQ.style.color = "red"
    }
})

// 验证码
code.addEventListener("blur", function () {
    let codeI = code.value
    if (codeI.length == 6) {
        codeQ.textContent = ""
        tpe.classList.remove("in")
    } else {
        tpe.classList.add("in")
        codeQ.textContent = "请输入6位验证码"
        codeQ.style.color = "red"
    }
})

// 密码
password.addEventListener("blur", function () {
    let passwordI = password.value
    if (passwordI.length >= 6 && passwordI.length <= 12) {
        passwordQ.textContent = ""
        tpr.classList.remove("in")
    } else {
        tpr.classList.add("in")
        passwordQ.textContent = "请输入6-12位密码"
        passwordQ.style.color = "red"
        passwordQ.style.opacity = "1";
    }
})

// 点击按钮让提交按钮变色并可提交
function funclick() {
    let sel = document.querySelector(".sel-i")
    console.log(sel);
    if (sel.checked == true) {
        btn.style.backgroundColor = "#00bdff"
        btn.style.color = "#fff"
        btn.disabled = false
    } else if (sel.checked == false) {
        btn.disabled = true
        btn.style.backgroundColor = "#e0e0e0"
        btn.style.color = "#5f5f5f"
    }
}

// 点击提交按钮进行判断，全部正确则跳转到首页
btn.addEventListener("click", function () {

    let ueserI = ueser.value
    let phoneI = phone.value
    let codeI = code.value
    let passwordI = password.value



    if (ueserI.length >= 6 && ueserI.length <= 20) {
        ueserQ.textContent = ""
        tpq.classList.remove("in")
    } else {
        tpq.classList.add("in")
        ueserQ.textContent = "请输入6-20位的用户名"
        ueserQ.style.color = "red"
        ueserQ.style.opacity = "1";
    }

    if (phoneI.length == 11) {
        phoneQ.textContent = ""
        tpw.classList.remove("in")
    } else {
        tpw.classList.add("in")
        phoneQ.textContent = "请输入11位手机号码"
        phoneQ.style.color = "red"
    }

    if (codeI.length == 6) {
        codeQ.textContent = ""
        tpe.classList.remove("in")
    } else {
        tpe.classList.add("in")
        codeQ.textContent = "请输入6位验证码"
        codeQ.style.color = "red"
    }

    if (passwordI.length >= 6 && passwordI.length <= 12) {
        passwordQ.textContent = ""
        tpr.classList.remove("in")
    } else {
        tpr.classList.add("in")
        passwordQ.textContent = "请输入6-12位密码"
        passwordQ.style.color = "red"
        passwordQ.style.opacity = "1";
    }

    if (ueserI.length >= 6 && ueserI.length <= 20 && passwordI.length >= 6 && passwordI.length <= 12) {
        window.location = "./index.html"
    }
})